<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="title">
			<image src="/static/index-title-background.png"></image>
			<view class="title_header">
				<uni-icons type="left" size="25" color="#ffffff" @tap="goBack"></uni-icons>
				<text class="title_header_title">经营统计</text>
			</view>
		</view>

		<view class="business">
			<view class="business_top">
				<view class="business_top_switch">
					<view class="business_switch">
						<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
							styleType="button" activeColor="#3486FD" inActiveColor="#00ff7f"></uni-segmented-control>
					</view>
					<view class="business_switch_right">
						<image src="../../../static/home.png"></image>
						<view style="width: 160rpx;">
							<uni-data-select v-model="value" :localdata="range" placeholder="自定义" :clear="false"
								@change="change"></uni-data-select>
						</view>
					</view>
				</view>

				<view class="content">
					<!-- 今日 -->
					<view v-show="current === 0">
						<!-- 收入 订单 -->
						<view class="content_view">
							<view class="content_view_left">
								<view class="content_image_left">
									<image src="../../../static/income3.png"></image>
								</view>
								<view class="">
									￥{{totle3}}
								</view>
								<view class="">
									收入
								</view>
							</view>
							<view class="content_view_right">
								<view class="content_image_right">
									<image src="../../../static/order-all3.png"></image>
								</view>
								<view class="" v-if="list">
									{{list.length}}
								</view>
								<view class="">
									订单量
								</view>
							</view>
						</view>

						<!-- 收入分布 -->
						<view class="content_income">
							<view class="content_income_text">
								收入分布
							</view>
							<view class="">
								<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
							</view>
						</view>

						<!-- 订单分布 -->
						<view class="content_income">
							<view class="content_income_text">
								订单分布
							</view>
							<view class="">
								<qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" />
							</view>
						</view>
					</view>
					<view v-show="current === 1">
						测啊
					</view>
				</view>
			</view>
		</view>
	</view>

	<!--	</view>-->
</template>

<script>
	// import echarts from '@/common/js/echarts.js'
	export default {
		data() {
			return {
				/** 基础信息 */
				token: '',
				/** 顶部搜素相关 */
				list: [{
					"order_id": "2024030216105327",
					"order_type": "1",
					"order_status": "2",
					"order_money": "0.01",
					"order_time": "2024-03-02 16:10:53",
					"order_pay_time": "2024-03-02 16:10:53",
					"order_pay_type": "1",
					"order_pay_money": "0.01",
					"order_pay_no": "2024030216105327",
				}],
				displayedList: [{
					"order_id": "2024030216105327",
					"order_type": "1",
					"order_status": "2",
					"order_money": 0.01,
					"order_time": "2024-03-02 16:10:53",
					"order_pay_time": "2024-03-02 16:10:53",
					"order_pay_type": "1",
					"order_pay_money": 0.01,
					"order_pay_no": "2024030216105327",
				}],
				pageNum: 1,
				pageSize: 10,
				totalPage: 0,
				loadStatus: 'more',
				chartData: {},
				chartData2: {},
				baoyang: 0,
				baoyangMoney: 0,
				xiche: 0,
				xicheMoney: 0,
				weixiu: 0,
				weixiuMoney: 0,
				jiuyuan: 0,
				jiuyuanMoney: 0,
				items: ['今日', '昨日'],
				current: 0,
				range: [{
						value: 0,
						text: "一周内"
					},
					{
						value: 1,
						text: "一个月内"
					},
					{
						value: 2,
						text: "三个月内"
					},
					{
						value: 3,
						text: "半年内"
					},
					{
						value: 4,
						text: "一年内"
					}
				],
				opts: {
					// rotate: false,
					rotateLock: false,
					color: ["#947FFF", "#FD7AA4"],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "",
					},
					subtitle: {
						name: "",
					},
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 1,
							activeRadius: 15,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
						}
					}
				},
				opts2: {
					padding: [30, 30, 0, 10],
					enableScroll: false,
					legend: {
						show: false,
						position: 'right',
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							seriesGap: 50,
						}
					}
				}
			}
		},
		onLoad(options) {
			this.token = getApp().globalData.userInfo.token;
			this.showList();
		},
		computed: {
			totle1() {
				//return this.displayedList.reduce((acc, cur) => acc + cur.money, 0);
				return this.displayedList.map(item => item.money || 0).reduce((acc, cur) => acc + cur, 0);
			},
			totle2() {
				return this.list.reduce((acc, cur) => {
					const money1 = cur.totalPrice * cur.totalDicount;
					const money2 = cur.totalCoupon;
					return acc + (money1 - money2);
				}, 0).toFixed(2);
			},
			totle3() {
				return this.totle2 - this.totle1;
			}
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
				});
			},
			showList() {
				uni.request({
					url: 'http://localhost:8080/system/order/listno',
					method: 'POST',
					data: {
						id: null
					},
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						this.list = res.data.rows || [];
						this.list.forEach(item => {
							if (item.itemTableName === "cm_orderitem_baoyang") {
								this.baoyang++;
								this.baoyangMoney += (item.totalPrice * item.totalDicount - item
									.totalCoupon);
							} else if (item.itemTableName === "cm_orderitem_clear") {
								this.xiche++;
								this.xicheMoney += (item.totalPrice * item.totalDicount - item
									.totalCoupon);
							} else if (item.itemTableName === "cm_orderitem_repair") {
								this.weixiu++;
								this.weixiuMoney += (item.totalPrice * item.totalDicount - item
									.totalCoupon);
							} else if (item.itemTableName === "cm_orderitem_rescue") {
								this.jiuyuan++;
								this.jiuyuanMoney += (item.totalPrice * item.totalDicount - item
									.totalCoupon);
							}
						});
					},
				});
				uni.request({
					url: 'http://localhost:8080/system/drawal/listno',
					method: 'POST',
					data: {
						id: null
					},
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						this.displayedList = res.data.rows || [];
					},
				});
			},
			upLoad() {
				this.showList();
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			change(e) {
				console.log("e:", e);
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						series: [{
							data: [{
									"name": "洗车",
									"value": this.xicheMoney
								}, {
									"name": "保养",
									"value": this.baoyangMoney
								},
								{
									"name": "维修",
									"value": this.weixiuMoney
								},
								{
									"name": "救援",
									"value": this.jiuyuanMoney
								}
							]
						}]
					};

					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);

				setTimeout(() => {
					let res2 = {
						categories: ["维修", "保养", "洗车", "救援"],
						series: [{
							name: "维修",
							data: [{
									"name": "维修",
									"value": this.weixiu,
									"color": "#6FA6FE"
								},
								{
									"name": "保养",
									"value": this.baoyang,
									"color": "#91E9FF"
								},
								{
									"name": "洗车",
									"value": this.xiche,
									"color": "#FDCA81"
								},
								{
									"name": "救援",
									"value": this.jiuyuan,
									"color": "#91E9FF"
								},
							]
							// },
							// {
							// 		name: "保养",
							// 		data: [{
							// 			"value": 170,
							// 			"color": "#91E9FF"
							// 		}]
							// 	},
							// 	{
							// 			name: "保养",
							// 			data: [{
							// 				"value": 346,
							// 				"color": "#FDCA81"
							// 			}]
						}, ]
					};

					this.chartData2 = JSON.parse(JSON.stringify(res2));
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 750rpx;
		position: relative;
	}

	/*自定义导航栏*/
	.title {
		width: 750rpx;
		position: relative;
		/*相对定位*/
	}

	.title>image {
		width: 750rpx;
		height: 450rpx;
	}

	.title_header {
		width: 100%;
		position: absolute;
		top: 60rpx;
		left: 0;
		// display: flex;
		// align-items: left;
		// justify-content: left;
		// border: 1px solid black;
	}

	.title_header_title {
		font-size: 35rpx;
		color: white;
		padding-left: 35%;
	}

	// .title_header>text{
	// 	font-size: 35rpx;
	// 	color: white;
	// 	// margin-left: 30%;
	// 	padding-left: 20%;
	// }

	.business {
		position: absolute;
		box-sizing: border-box;
		top: 150rpx;
		width: 700rpx;
		height: 450rpx;
		background-color: white;
		margin: 0 25rpx;
		border-radius: 20rpx;
	}

	.business {
		.business_top {
			.business_top_switch {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.business_switch {
					width: 260rpx;
					margin: 40rpx auto;
					margin-left: 210rpx;
				}

				.business_switch_right {

					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 10rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

			}
		}

	}

	// 选择器圆角
	.segmented-control__item--button--first {
		border-top-left-radius: 50rpx !important;
		border-bottom-left-radius: 50rpx !important;
	}

	.segmented-control__item--button--last {
		border-top-right-radius: 50rpx !important;
		border-bottom-right-radius: 50rpx !important;
		background-color: #e5e5e5;
	}

	// 取消下拉框选择和边框
	// .uni-icons {
	// 	display: none;
	// }

	.uni-select {
		border: 1rpx solid white !important;
	}

	// 收入 订单图
	.content_view {
		width: 90%;
		margin: 0 auto;
		height: 300rpx;
		display: flex;
		justify-content: space-around;
		border-top: 6rpx solid #e9e9e9;

		view {
			margin: 6rpx 0;
		}

		.content_view_left {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.content_image_left {
				background-color: #f1925b;
				width: 70rpx;
				height: 70rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.content_view_right {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.content_image_right {
				background-color: #50A2FF;
				width: 70rpx;
				height: 70rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	//收入分布
	.content_income {
		margin-top: 20rpx;

		background-color: white;
		height: 650rpx;
		border-radius: 20rpx;

		.content_income_text {
			width: 90%;
			margin: 0 auto;
			// margin-top: -50rpx;
			padding: 20rpx 0;
			font-size: 32rpx;
			font-weight: 600;
			color: black;
			border-bottom: 6rpx solid #e9e9e9;
		}
	}
</style>